How to be strategic when picking a typeface 選字型的策略指南

Ratio, efficiency, shape & language support 字型比例、效率、形狀和語言支援

本文對常用UI字型指標進行了研究對比，幫助您選擇最適合產品需求的字型。

視角是指物體根據其距離和大小所呈現的視覺大小。在排版中，這個概念決定了文字在不同大小和距離下的可讀性—視角越小，越難看清細節。

x-height 字高比例是指小寫字母的主體高度。簡單來說，就是從字母底部到中間主體頂部的距離。當這個高度較大時，即使字型大小相同，文字看起來也會更大、更容易閱讀。這就是為什麼現代設計的螢幕字型通常會採用較大的字高比例。

字型的最小可讀性取決於觀看距離和字元大小。研究表明，最佳x-height應在0.3°視角左右，低於0.2°時閱讀速度會明顯下降。

可以幫助我們評估字型的可讀性。只要輸入字型大小、x字高、螢幕解析度和觀看距離，就能得到結果。

使用手機螢幕標準解析度167 ppi測試，考慮兩種場景：坐姿（距離14英寸）和臥姿（距離10英寸）觀看。測試字型大小為16px（12pt）和12px（9pt）。結果如下：

以下是我使用x字高計算器評估的幾種常用字型：

雖然理論上需要69%的x字高比例，但這不太實際。太高的x字高反而會使文字看起來擁擠，降低可讀性。

基於此，最小x字高比例應超過49%以保持可讀性。理想情況下，定在52%以上可在移動裝置上達到更好的閱讀效果。

行距指字型大小與行高間的垂直間隔，包括上行距（行高頂部到上升部）和下行距（行高底部到下降部）。

我測試了Open Sans和SF Pro兩款字型，設定為16px且在24px高的容器內居中，測量了它們的上下行距比例：這些比例影響文字在標籤等容器中的位置。通常上行距大於下行距，但較小的比例能創造更平衡的垂直間距，使文字視覺上更居中穩定。

在UI中，即使使用相同的字型大小和行高，不同字型也會佔用不同的水平空間。圖中展示了相同內容用三種字型（Roboto、HarmonyOS Sans和Work Sans）顯示的效果，Roboto佔用空間最少，其次是HarmonyOS Sans，Work Sans佔用最多。

字型橫向間距越緊湊越高效，相同版面可以容納更多資訊。不過，字母間距的調整也會影響空間效率。

Character Differentiation 字元區分度：清晰的字形設計能提高易讀性，讓相似的字元更容易區分，比如"0"和"O"，或"I"、"l"和"1"。

Open Letter Shapes 開放式字母：字母的開口設計，如字母"c"的開口更大時，看起來更輕盈簡約，整體視覺效果更清晰友好。

Currency Symbols 貨幣符號：貨幣符號（如$）的設計各不相同，有的穿過"S"有的不穿過。為了提升使用者體驗，建議使用標準且易識別的符號。

Numbers 數字：數字在介面中扮演著關鍵角色，尤其是在金融、技術和資料產品中。字型的選擇直接影響資料顯示的清晰度和一致性。等寬數字具有統一的寬度，讓數字在表格和儀表盤中能夠垂直對齊，提高可讀性。有些字型預設支援等寬數字，有些則需要使用專門的字型變體。

Consistent width across weights 不同字重保持一致寬度

某些字型在不同字重（細體、常規、粗體等）下都保持相同的數字寬度，確保在強調某些數值時仍能保持對齊，這在表格和財務報表中特別有用。

數字長度 Number length

較短的數字能節省空間，在同樣寬度下顯示更多數字。這在表格、儀表盤或手機螢幕等空間有限的地方特別重要。

不同字型支援的語言和字符集不同。選擇字型前，需要先確定產品需要支援哪些語言。可以用字符集檢查工具（https://www.alphabet-type.com/tools/charset-checker/）檢視字型支援哪些字元。

比如Open Sans字型對拉丁文和西里爾文支援較好，但不支援阿拉伯文。下圖中，綠色表示支援的標點符號，黃色是輔助字元，紅色是未支援但必需的字元。但由於字型檔案大小限制，很難找到支援所有書寫系統的字型，特別是對於中文等需要大量字元的語言。因此，多語言產品通常為不同書寫系統使用專門字型。